<template>
    <div class="main">
        <div class="main-container">
            <Carousel></Carousel>
            <Products1></Products1>
            <Products2></Products2>
            <Products3></Products3>
            <Products4></Products4>
            <Products5></Products5>
        </div>
    </div>
</template>

<script>
import Carousel from "@/components/index/main/Carousel.vue";
import Products1 from "@/components/index/main/Products1.vue";
import Products2 from "@/components/index/main/Products2.vue";
import Products3 from "@/components/index/main/Products3.vue";
import Products4 from "@/components/index/main/Products4.vue";
import Products5 from "@/components/index/main/Products5.vue";

export default {
    components: {
        Carousel,
        Products1,
        Products2,
        Products3,
        Products4,
        Products5,
    },
};
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    background-color: #f7f7f7;
    .main-container {
        width: 1200px;
        margin: 0 auto;
    }
}
</style>
